import React from 'react';
import Checkbox from 'antd-mobile/lib/checkbox';
import toFixed from 'shared/utils/toFixed';
import localStorage from 'shared/utils/localStorage';
import findIndex from 'lodash/findIndex';
import remove from 'lodash/remove';

import './index.less';

export default class ComposeBuy extends React.PureComponent {

  state = {
    selectList: []
  }

  handlSelectProduct = (proItem) => {
    const { selectList } = this.state;
    if (findIndex(selectList, (item) => item.product_id === proItem.product_id) === -1) {
      selectList.push(proItem);
    } else {
      remove(selectList, (item)=> item.product_id === proItem.product_id)
    }
    this.setState({ selectList: [...selectList] });
  }

  isProductSelect = (productId) => {
    const { selectList } = this.state;

    return findIndex(selectList, (item) => item.product_id === productId) !== -1
  }

  getSumMoney = () => {
    let sumMoney = 0;
    const { selectList } = this.state;
    const { item } = this.props;

    selectList.forEach(item => {
      sumMoney += item.rawprice;
    });

    return sumMoney += item.price;
  }

  handleBuyProduct = () => {
    const { selectList } = this.state;
    const { product_id } = this.props.item;
    let selectListIds = selectList.map((item) => item.product_id);
    if (product_id) {
      localStorage.set('sub_product_ids', selectListIds.join())
      localStorage.set('product_id', product_id)

      __self.history.push('/OrderDetails/groupBuyProduct')
    }
  }

  render() {
    const { selectList } = this.state;
    const { item = {} } = this.props;

    const { groupbuyproductlist = [] } = item;

    const showPice = item.rawprice !== item.price;
    return (
      <div className="compose-buy">
        <div className="product-detail">
          <div className='product-detail-img'>
            <img src={item.image} alt="" />
          </div>
          <div className="product-detail-content">
            <div className="product-detail-content-title">
              <span>{item.title}</span>
              <span>{item.brief}</span>
            </div>
            {
              showPice &&
              <div className="price-item">
                <span className="price-item-label">会 员 价</span>
                <span className="price-item-number">
                  <span className='number-type'>￥</span>
                  <span>{toFixed(item.price)}</span>
                </span>
              </div>
            }

            <div className="price-item">
              <span className="price-item-label">销  售  价</span>
              <span className="price-item-number general-price">
                <span className='number-type'>￥</span>
                <span className="general-price">{toFixed(item.rawprice)}</span>
              </span>
            </div>
          </div>
        </div>
        <div className="recommend-list">
          {
            groupbuyproductlist.map((productItem, index) => (
              <div className="recommend-list-item" key={index}>
                <img src={productItem.image} alt="" />
                <div className="recommend-list-item-title">{productItem.title}</div>
                <div className="select-item" onClick={()=> this.handlSelectProduct(productItem)}>
                  <Checkbox checked={this.isProductSelect(productItem.product_id)} />
                  <span className="recommend-list-item-price">{`￥${toFixed(productItem.rawprice)}`}</span>
                </div>
              </div>
            ))
          }
        </div>

        <div className="cash-settlement">
          <span>{`已选择${selectList.length}个配件`}</span>
          <div>
            组合价格
            <span className="total-money">￥ {toFixed(this.getSumMoney())}</span>
          </div>
        </div>
        <div className="button-container">
          <span className="now-buy-button" onClick={this.handleBuyProduct}>立即购买</span>
        </div>
      </div>
    )
  }
}